<!-- 订单详情 -->
<template lang="html">
  <div id="order-detail" v-show="showContent" @touchend="move">

    <section class="order-header">
      <p class="order-status">等待付款</p>
      <p class="order-state">（房东已确认）</p>
      <p class="order-hint">房东已确认您的订单，我们将为您保留 44分58秒，请尽快支付</p>
    </section>
    <!-- <section class="order-flow">
      <flow>
        <flow-state title="租客签名" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="房东签名" is-done></flow-state>
        <flow-line :is-done="order.status >= 2"></flow-line>

        <flow-state title="支付租金" :is-done="order.status >= 2"></flow-state>
        <flow-line :is-done="order.status >= 3"></flow-line>

        <flow-state title="签约成功" :is-done="order.status >= 3"></flow-state>
      </flow>
    </section> -->
    <section class="order">
      <house-list :houseInfo="houseInfo" v-if="houseInfo" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
    </section>
    <!-- 房东信息 -->
    <section class="landlord">
      <!-- 房东头像 -->
      <div class="avatar">
        <img :src="user.headImgUrl" v-if="user.headImgUrl">
      </div>
      <!-- 房东信息 -->
      <div class="landlord-info">
        <p>
          <span class="name">{{user.trueName}}</span>
          <span class="tag">房东</span>
        </p>
        <p class="phone" v-if='virtualNum'>{{virtualNum}}</p>
      </div>
      <!-- 房东电话 -->
      <div class="landlord-tel" @click="contactLandlor" v-if="virtualNum">
        <i class="icon icon-phone"></i>
      </div>
    </section>

    <section class="rent-info">
      <group>
        <x-input
          :show-clear="false"
          title="租金"
          text-align="right"
          value="4500元"
          disabled
        ></x-input>

        <x-input
          :show-clear="false"
          title="押金"
          text-align="right"
          value="4500元"
          disabled
        ></x-input>

        <x-input
          :show-clear="false"
          title="物业费"
          text-align="right"
          value="1000元"
          disabled
        ></x-input>

        <x-input
          :show-clear="false"
          title="合计"
          text-align="right"
          value="10000元"
          disabled
        ></x-input>
      </group>
    </section>

    <section>
      <group>
        <x-input
          :show-clear="false"
          title="入住人（1）"
          text-align="right"
          value="张鱼饭"
          disabled
        ></x-input>

        <x-input
          :show-clear="false"
          title="手机号"
          text-align="right"
          value="15012341234"
          disabled
        ></x-input>
      </group>
    </section>

    <section>
      <group>
        <x-input
          :show-clear="false"
          title="订单号"
          text-align="right"
          value="SZ1231234312421"
          disabled
        ></x-input>

        <x-input
          :show-clear="false"
          title="下单时间"
          text-align="right"
          value="2017-10-10 12:21:24"
          disabled
        ></x-input>
      </group>
    </section>
    <!-- 租客信息 -->
    <!-- <section class="tenant">
      <p class="tenant-title">租客信息</p>
      <div class="tenant-ul">
        <group>
          <x-input :show-clear="false"title="姓名" text-align="right" v-model="user.trueName" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="入住人数" text-align="right" v-model="trueNames.length" :show-clear="showClear" disabled></x-input>
          <ul class="tenants-box">
            <li class="tenant-item" v-for="(name, index) in trueNames">
              <p class="name">{{name}}</p>
              <p class="idCard">{{idCards[index]}}</p>
            </li>
          </ul>
          <x-input :show-clear="false"title="入住时间" text-align="right" v-model="checkInTime" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="交费周期" text-align="right" v-model="payWay" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="交费时间" text-align="right" v-model="payDate" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="租金" text-align="right" v-model="rentalMoney" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="押金" text-align="right" v-model="pledgeMoney" :show-clear="showClear" disabled></x-input>
          <x-input :show-clear="false"title="合计" text-align="right" v-model="totalMoney" :show-clear="showClear" disabled></x-input>
        </group>
      </div>
    </section> -->
    <div class="order-submit">
      <x-button type="primary" @click.native="payClick" :disabled="submitDisable">确认支付</x-button>
    </div>
    <div class="time-tip" v-if="deadline" :style="{bottom: bottom + 'px'}">距付款结束： {{deadline}}</div>
  </div>
</template>

<script>
import houseList from '@/components/houseList'
import Payment from '@/components/Payment'
import { XButton } from 'vux'
export default {
  components: {
    XButton,
    houseList,
    Payment
  },
  computed: {
    rentalMoney: { // 租金
      get: function () {
        return `${this.order.money} 元`
      },
      set: function () {}
    },
    pledgeMoney: { // 押金
      get: function () {
        return `${this.order.dMoney} 元`
      },
      set: function () {}
    },
    totalMoney: { // 支付总额
      get: function () {
        return `${this.order.totalMoney} 元`
      },
      set: function () {}
    },
    checkInTime: { // 入住时间
      get: function () {
        return `${this.contract.beginTime.slice(0, 10)} 至 ${this.contract.endTime.slice(0, 10)}`
      },
      set: function () {}
    },
    payWay: { // 交费周期
      get: function () {
        let payWay = ''
        switch (this.contract.payWay) {
          case 1:
            payWay = '按月交'
            break
        }
        return payWay
      },
      set: function () {}
    },
    payDate: { // 交费时间
      get: function () {
        return `每月${this.contract.billTime}日前`
      },
      set: function () {}
    },
    trueNames: { // 入住人姓名
      get: function () {
        return this.contractPerson.trueName.split(',')
      },
      set: function () {}
    },
    idCards: { // 入住人身份证
      get: function () {
        return this.contractPerson.idCard.split(',')
      },
      set: function () {}
    }
  },
  data () {
    return {
      showContent: true, // 显示页面
      payShow: false, // 支付弹窗
      showClear: false,
      submitDisable: true, // 禁止支付
      deadline: '', // 支付剩余时间
      contract: { // 合同详情
        beginTime: '2017-01-01',
        endTime: '2017-01-01',
        payWay: 1,
        billTime: 1
      },
      contractPerson: { // 入住人信息
        trueName: '',
        idCard: ''
      },
      bottom: 30,
      houseInfo: '', // 房源信息
      user: {}, // 房东信息
      order: { // 订单详情
        money: 0,
        dMoney: 0,
        totalMoney: 0,
        state: 1,
        exepireTime: Date.now()
      },
      orderId: '', // 订单id
      virtualNum: '' // 虚拟电话
    }
  },
  methods: {
    // 计算倒计时的bottom值
    move () {
      let screenHeight = window.screen.height
      let compare = document.body.clientHeight - document.body.scrollTop
      let y = compare - screenHeight
      if (y < 5) {
        this.bottom = 65
      } else {
        this.bottom = 30
      }
    },
    // 显示支付弹窗
    payClick () {
      this.payShow = true
    },
    // 联系房东
    contactLandlor () {
      window.location.href = `tel:${this.virtualNum}`
    },
    // 更新页面倒计时
    updateDeadline () {
      setTimeout(() => {
        let timestamp = this.order.exepireTime - Date.now()
        timestamp = timestamp >= 0 ? timestamp : 0
        if (timestamp > 0) {
          let hour = Math.floor((timestamp / 1000 / 60 / 60) % 24)
          hour = hour > 9 ? hour : `0${hour}`

          let minute = Math.floor((timestamp / 1000 / 60) % 60)
          minute = minute > 9 ? minute : `0${minute}`

          let second = Math.floor(timestamp / 1000 % 60)
          second = second > 9 ? second : `0${second}`

          this.deadline = `${hour}:${minute}:${second}`
          this.updateDeadline()
          this.submitDisable = false
        } else {
          this.deadline = `00:00:00`
          this.submitDisable = true
        }
      }, 1000)
    }
  },
  created () {
    let orderId = this.$route.query.orderId + ''
    if (orderId === 'undefined' || orderId === '') {
      this.$vux.toast.text('订单id不能为空')
      return false
    }
    this.orderId = orderId
    // let orderId = 37
    this.$axiosPosting(this.$api.queryOrderDetail4Renter, {orderId}).then(res => {
      if (res.code === '0000') {
        this.showContent = true
        this.contract = Object.assign({}, res.data.contract)
        this.contractPerson = Object.assign({}, res.data.contractPerson)
        this.houseInfo = Object.assign({}, res.data.housePersons)
        this.user = Object.assign({}, res.data.user)
        this.order = Object.assign({}, res.data.order)
        if (this.order.status === 1) {
          this.updateDeadline()
        }

        let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        let mobileFor = userInfo ? userInfo.mobile : ''

        if (mobileFor) {
          this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo: this.user.mobile}).then(res => {
            let data = JSON.parse(res.data)
            if (data.errorCode === '0') {
              this.virtualNum = data.virtualNum
            } else {
              this.virtualNum = ''
            }
          })
        } else {
          this.$router.replace('/login')
        }
      } else {
        this.$vux.toast.text(res.msg)
      }
    })
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";
 #order-detail{
   min-height: 100vh;
   background: #f4f4f4;
   ul, li{
     list-style: none;
   }
   .icon{
     display: inline-block;
   }
   .order-header{
     width: 100%;
     padding: 30px 0;
     text-align: center;
     font-size: 12px;
     color: #fff;
     background: #ff9600;
     box-sizing: border-box;
     .order-status{
       font-size: 22px;
     }
     .order-hint{
       margin-top: 25px;
     }
   }
   section{
     margin-bottom: 6px;
     background: #fff;
   }
   .order{
     padding-right: 15px;
     box-sizing: border-box;
     .ui-house-li{
       border-bottom: none;
     }
   }
   .order-flow{
     height: 92px;
   }
   .tenants-box{
     padding: 0 15px;
     font-size: 12px;
     line-height: 35px;
     color: #888;
     .tenant-item{
       display: flex;
       justify-content: space-between;
     }
   }
   .landlord{
     width: 100%;
     height: 85px; /* 160/40 */
     padding: 0 15px;
     display: flex;
     box-sizing: border-box;
     align-items: center;
     .avatar{
       width: 55px; /* 114/40 */
       height: 55px; /* 114/40 */
       border-radius: 50%;
       overflow: hidden;
       margin-right: 10px; /* 40/40 */
       img{
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
     .landlord-info{
       flex: 1;
       font-size: 15px;
       color: #343434;
       p{
         line-height: 19px;
       }
       .tag{
         display: inline-block;
         line-height: 15px;
         padding: 2px 10px;
         border-radius: 3px;
         font-size: 10px;
         background: #ff9600;
         color: #fff;
         vertical-align: top;
       }
       .phone{
         font-size: 12px;
         color: #777;
       }
     }
     .landlord-tel{
       display: flex;
       align-items: center;
       .icon-phone{
         width: 38px;
         height: 38px;
         background: url('../../images/rent/order_phone.png') center no-repeat;
         background-size: cover;
       }
     }
   }
   .tenant{
     padding-top: 18px;
     margin-bottom: 0;
     padding-bottom: 26px;
     .tenant-title{
       padding-left: 12px;
       font-size: 15px; /* 30/40 */
       line-height: 1.25;
       color: #343434;
       border-left: 3px solid #ff9600; /* 9/40 */
       box-sizing: border-box;
     }
   }
   .time-tip{
     position: fixed;
     width: 134px;
     height: 27px;
     box-shadow: 0 0 5px rgba(0, 0, 0, .2);
     transition: all .5s;
     border-radius: 27px;
     bottom: 65px;
     left: 0;
     right: 0;
     margin:auto;
     font-size: 12px;
     text-align: center;
     line-height: 27px;
     color: #575757;
     background: #fff;
   }
   .order-submit{
     width: 100%;
   }
 }

 @media screen and (max-width: 320px) {
    #order-detail{
      .order-header{
        padding: 30px 24px;
      }
    }
 }
</style>

<style lang="less">
  #order-detail{
    .weui-cells{
      margin-top: 0;
    }
    .vux-x-input{
      padding: 10px 15px !important;
      .weui-label{
        font-size: 15px;
        color: #343434;
      }
      .weui-input:disabled{
        -webkit-text-fill-color: #777777;
        -webkit-opacity: 1;
        color: #777777;
      }
    }
    .weui-btn{
      border: 0;
      border-radius: 0;
    }
    .weui-cells:first-of-type{
      &:before{
        display: none;
      }
    }
    .weui-btn_primary{
      box-shadow: none;
      &::after{
        border: none;
      }
      &.weui-btn_disabled{
        background: #dfdfdf !important;
        color: #666;
      }
    }
  }
</style>
